<template>
	<div class="box3">
		<div class="tops">
			<el-input placeholder="请输入订单号" class="inptas" v-model="ordersId" @keyup.native.enter="search"></el-input>
			<el-input placeholder="请输入最低价格" class="inptas" v-model="minPrice" @keyup.native.enter="search"></el-input>
			<span class="heng">~</span>
			<el-input placeholder="请输入最高价格" class="inptas" v-model="maxPrice" @keyup.native.enter="search"></el-input>
			<el-button type="primary" icon="el-icon-search" class="search" @click="search">搜索</el-button>
		</div>
		<div class="banner">
			<el-table :data="pageTicket" style="width: 100%">
				<el-table-column prop="ordersId" label="订单号">
				</el-table-column>
				<el-table-column prop="wareName" label="商品名称">
				</el-table-column>
				<el-table-column prop="price" label="商品原价">
				</el-table-column>
				<el-table-column prop="vipPrice" label="会员价">
				</el-table-column>
				<!-- <el-table-column prop="actPrice" label="实际价格">
				</el-table-column> -->
				<el-table-column
				show-overflow-tooltip="true"
				 prop="addressContent" label="收货地址">
				</el-table-column>
				<el-table-column prop="userName" label="用户名">
				</el-table-column>
				<el-table-column prop="outletName" label="门店">
				</el-table-column>
				<el-table-column prop="receivePhone" label="联系方式">
				</el-table-column>
				<el-table-column prop="orderStatusName" label="订单状态">
					<template slot="header" slot-scope="scope">
						<el-dropdown @command="siftuser" trigger="click">
							<span class="el-dropdown-link">
								订单状态<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu slot="dropdown">
								<el-dropdown-item command=9999>全部</el-dropdown-item>
								<el-dropdown-item :command='x.orderStatus' v-for="(x,index) in orderStatusList"
									:key="index">{{ x.orderStatusName }}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</template>
					<template slot-scope="scope">
						<span v-if="scope.row.orderStatus == 0" style="color: #ff0000;;">待退款</span>
						<span v-if="scope.row.orderStatus == 1" style="color: #ff0000;">待付款</span>
						<span v-if="scope.row.orderStatus == 2" style="color: #10dc62;">待收货</span>
						<span v-if="scope.row.orderStatus == 3" style="color: #10dc62;">已发货</span>
						<span v-if="scope.row.orderStatus == 4" style="color: #10dc62;">已付款</span>
						<span v-if="scope.row.orderStatus == 5" style="color: #ff0000;">订单过期</span>
					</template>
				</el-table-column>
				<el-table-column prop="" label="更多">
					<template slot-scope="scope">
						<el-button :type="scope.row.orderStatus == 4  ? 'primary' : 'info'" size="small"
							@click="updateOrders(scope.row)">发货</el-button>
						<el-button :type="scope.row.orderStatus == 2 || scope.row.orderStatus == 3  ? 'danger' : 'info'"
							size="small" @click="refund(scope.row)">退货</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!--分页-->
			<el-row>
				<el-col>
					<el-pagination @current-change="handleCurrentChange" :page-sizes="[5, 10, 50, 100]"
						:page-size="pagesize" layout="prev, pager, next" :total="total" :current-page="currentpage">
					</el-pagination>
				</el-col>
			</el-row>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				baseUrl: require('../assets/baseUrl').baseUrl,
				total: 0, //总数据条数
				currentpage: 1, //当前所在页默认是第一页
				pagesize: 5, //每页显示多少行数据 默认设置为10
				pageTicket: [], //分页后的当前页数据
				ordersId: "", //订单编号
				minPrice: "", //最小价格
				maxPrice: "", //最大价格
				orderStatusList: [], //订单状态
				orderStatus: 9999
			}
		},
		methods: {

			//退货
			refund(v) {
				// console.log(v)
				if (v.orderStatus == 2) {
					this.$http.post(this.baseUrl + "updateOrders", {
						ordersId: v.ordersId,
						orderStatus: 0
					}).then(res => {
						if (res.data.code == 200) {
							this.$message.success("退货成功")
							if (this.ordersId != "" || this.minPrice != "" || this.maxPrice != "") {
								this.search()
							} else if (this.orderStatus != "") {
								this.searchStatus()
							} else {
								this.getordersList()
							}
						}
					})
				}
			},
			//发货
			updateOrders(v) {
				// http://localhost:8081/updateOrders
				if (v.orderStatus == 4) {
					this.$http.post(this.baseUrl + "updateOrders", {
						ordersId: v.ordersId,
						orderStatus: 2
					}).then(res => {
						if (res.data.code == 200) {
							this.$message.success("发货成功")
							if (this.ordersId != "" || this.minPrice != "" || this.maxPrice != "") {
								this.search()
							} else if (this.orderStatus != "") {
								this.searchStatus()
							} else {
								this.getordersList()
							}
						}
					})
				}
			},
			search() {
				if (this.ordersId == "") {
					this.ordersId = null
				}
				if (this.minPrice == "") {
					this.minPrice = null
				}
				if (this.maxPrice == "") {
					this.maxPrice = null
				}
				this.searchOrders()
			},
			searchOrders() {
				this.$http.post(this.baseUrl + "searchOrders", {
					ordersId: this.ordersId,
					minPrice: this.minPrice,
					maxPrice: this.maxPrice,
					pageIndex: this.currentpage,
					pageSize: this.pagesize
				}).then(res => {

					this.pageTicket = res.data.data.ordersList
					this.total = res.data.data.pageCount * this.pagesize
				})
			},

			siftuser(v) {
				if (v == 9999) {
					this.currentpage = 1
					this.orderStatus = v
					this.getordersList()
				} else {
					this.currentpage = 1
					this.orderStatus = v
					this.searchStatus()
				}

			},
			//根据订单状态搜索
			searchStatus() {
				// http://localhost:8081/orderStatus
				this.$http.post(this.baseUrl + "orderStatus", {
					orderStatus: this.orderStatus,
					pageIndex: this.currentpage,
					pageSize: this.pagesize
				}).then(res => {
					this.pageTicket = res.data.data.ordersList
					this.total = res.data.data.pageCount * this.pagesize
				})
			},
			handleCurrentChange(v) {
				this.currentpage = v
				if (this.ordersId != "" || this.minPrice != "" || this.maxPrice != "") {
					this.searchOrders()
				} else if (this.orderStatus != 9999) {
					this.searchStatus()
				} else {
					this.getordersList()
				}

			},
			//查看订单状态列表
			// http://localhost:8081/orderStatusList
			lookorderStatusList() {
				this.$http.post(this.baseUrl + "orderStatusList", {}).then(res => {
					this.orderStatusList = res.data.data
				})
			},
			//查找订单列表
			// http://localhost:8081/ordersList

			getordersList() {
				this.$http.post(this.baseUrl + 'ordersList', {
					pageIndex: this.currentpage,
					pageSize: this.pagesize
				}).then(res => {
					//console.log(res)
					this.pageTicket = res.data.data.ordersList
					this.total = res.data.data.pageCount * this.pagesize
				})
			}
		},
		mounted() {
			this.getordersList()
			this.lookorderStatusList()
		}
	}
</script>
<style lang="less">
	.box3 {

		.tops {
			width: 80vw;
			height: 65px;
			display: flex;
			align-items: center;
			margin-bottom: 15px;
			margin-left: 30px;
			position: relative;

			.search {
				display: flex;
				align-items: center;

				.el-input {
					margin: 0 5px;
				}
			}
		}

		.banner {
			width: 80vw;
			margin-left: 30px;
		}

		.el-pagination {
			margin-top: 30px;
			text-align: center;

		}

		.el-input__prefix {
			left: 130px;
			font-size: 24px;
		}

		.inptas {
			width: 180px;
			margin-right: 10px;
		}

		.heng {
			height: 65px;
			line-height: 60px;
			font-size: 20px;
			margin-left: 10px;
			margin-right: 10px;
		}

		.cell {
			text-align: center;
			display: flex;
			justify-content: center;

			.el-button--small {
				padding: 7px 10px;
				font-size: 12px;
				border-radius: 3px
			}
		}

		.btnsa {
			width: 80px;
			height: 40px;
			margin-top: 10px;
			position: relative;
			font-size: 14px;
		}


	}
</style>